@charset "utf-8";
/* CSS Document */

		@font-face {
    font-family: "Annabel1";
    src: url("../../Fonts/annabel 1.ttf");}
@font-face {
    font-family: "CallingAngels";
    src: url("../../Fonts/Calling Angels Personal Use.ttf");}
@font-face {
    font-family: "Valdemar";
    src: url("../../Fonts/Valdemar.ttf");}

    
        header, h1, section, footer, aside, nav, article, figure, figcaption {
			display: block;}                 
        
		body {
			color: #FFFFFF;
			background-image: url("../aetherium images/Background - Keri's Nebula.jpg");
			background-size: cover;
            font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
			line-height: 1.4em;
			margin: 0 auto;
            width: 90%;}
		
    @media (max-width: 768px) {
        body {
            font-size: 16px;
            line-height: 1.6;}

        .wrapper {
            padding: 10px;
            border: none;}

        nav {
            position: relative;
            box-shadow: none;}

        nav ul {
            display: none;
            flex-direction: column;}

        nav ul.active {
            display: flex;}
    }

        .wrapper {
			width: 80%; /* More flexible */
            height: inherit;
			margin: 0 auto;
			padding: 20px;
			border: 2px solid #000;
			display: block;
            background-image: url("../aetherium images/Background - Grungy Blue Texture 01.jpg");
            background-size: contain;
            mask: radial-gradient(125% at 250% 250%, transparent 98%, black) -250% -250%;}
    
        .saga {
            font-size: 4rem;}

        #special {
			width: 100%;
            max-width: 8125%;
			margin: 125% auto 125% auto;
			padding: 0px 0px 0px 125%;
			align-content: center;}
		
        .header {
			margin: 0px 0px 125% 0px;}
		
        .shortstack {
            letter-spacing: -.70em;}
    
        .sarcasm {
            display: inline-block;
            -webkit-transform: skew(15deg,0deg); /* Safari and Chrome */
            -moz-transform: skew(15deg,0deg); /* Firefox */
            -ms-transform: skew(15deg,0deg); /* IE 9 */
            -o-transform: skew(15deg,0deg); /* Opera */
            transform: skew(15deg,0deg);}

        @media (max-width: 768px) {
            .sarcasm {
                transform: none;}}
    
        h1 {
			text-align: center;
			color: #E800FF;
			width: auto;
			margin: 0px;}
		
        nav {
			background-image: url("../aetherium images/Background - Grungy Blue Texture 01.jpg");
            clear: both;
			color: blue;
			text-align: center;
			font-size: 1.2rem;
            margin: 0 auto;
            width: 75%;
			height: auto;
            list-style-type: none;
            position: -webkit-sticky; /* Safari */
            position: sticky;
            overflow: visible;
            top: 0;
			border: 2px;
            border-radius: 25px;
			box-shadow: 10px 10px 5px #000000, 10px 10px 5px #000000,
                0 3px 2px #000000, 0 4px 2px #000000,
                0 5px 2px #000000, 0 6px 2px #000000,
                0 7px 2px #000000, 0 8px 2px #000000,
                0 9px 2px #000000, 0 10px 2px #000000,
                0 11px 2px #000000, 0 12px 2px #000000,
                10px 20px 30px #7878F6;
            border-width: 2px;}
    
        nav ul {
			margin: 0px;
            flex-direction: column;
            text-align: center;
            padding: 5px 0px 5px 30px;
			font-size: 20px;
            height: auto;}

        nav ul.active {
            display: flex;}
		
        nav li {
			display: inline;
			margin-right: 30px;
			font-size: 1.2rem;
            height: auto;}
        
        nav li a {
			color: #ffffff;
			font-size: 20px;}
		
        nav li a:hover, nav li a.current {
			color: #E800FF;
			font-size: 20px;}
        
        .menu-toggle {
        display: block;
        cursor: pointer;
        font-size: 24px;
        color: white;
        text-align: center;
    }
        .arrow {
            animation: pulse 1s linear infinite;}
        
        @-webkit-keyframes pulse {
            0% {
                -webkit-transform: scale(1.1);
                transform: scale(1.1);}
            50% {
               -webkit-transform: scale(0.8);
               transform: scale(0.8);}
            100% {
               -webkit-transform: scale(1);
               transform: scale(1);}
            }

        .rotate-image {
            /* Adjust the angle as needed */
            transform: rotate(180deg);
            height: 50;}
    
        .rotate-image-a {
           /* Adjust the angle as needed */
           transform: rotate(90deg);
            height: 50;}
    
        .dropbtn {
  color: #ffffff;
  padding: 16px;
  font-size: 20px;
  font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
  border: none;
  background-color: inherit;}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-image: url("../aetherium images/Background - Grungy Blue Texture 01.jpg");
  width: max-content;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
height: auto;
			border: 2px;
            border-radius: 25px;
			box-shadow: 10px 10px 5px #000000, 10px 10px 5px #000000,
                0 3px 2px #000000, 0 4px 2px #000000,
                0 5px 2px #000000, 0 6px 2px #000000,
                0 7px 2px #000000, 0 8px 2px #000000,
                0 9px 2px #000000, 0 10px 2px #000000,
                0 11px 2px #000000, 0 12px 2px #000000,
                10px 20px 30px #7878F6;
            border-width: 2px;
            }

.dropdown-content a:hover {
  background-image: url("../aetherium images/Background - Grungy Blue Texture 01.jpg");
  }

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;background-image: url("../aetherium images/Background - Grungy Blue Texture 01.jpg");
  }
        
    
		section.bios {
			float: center;
			width: auto;}
		article {
			clear: both;
			width: 100%;}
		hgroup {
			margin-top: 40px;}
		figure {
			float: left;
			width: 400px;
			padding: 5px;
			margin-left: 25px;}
		figured {
			float: right;
			width: 400px;
			padding: 5px;
            margin: 0px 0px 10px 30px;
            margin-right: 25px;}
		figcaption {
			font-size: 90%;
			text-align: center;
			color: #F89A00;}
        aside {
			background: rgba(10, 57, 238, 0.19);
            backdrop-filter: blur(4.9px);
            -webkit-backdrop-filter: blur(4.9px);
            width: 400px;
			height: auto;
			float: right;
			padding: 30px;
            margin: 0px 0px 10px 30px;
            margin-right: 25px;
			border-radius: 25px;
			box-shadow: -10px 10px 5px #000000, -10px 10px 5px #000000,
                0 3px 2px #000000, 0 4px 2px #000000,
                0 5px 2px #000000, 0 6px 2px #000000,
                0 7px 2px #000000, 0 8px 2px #000000,
                0 9px 2px #000000, 0 10px 2px #000000,
                0 11px 2px #000000, 0 12px 2px #000000,
                -10px 20px 30px #7878F6;
            border-width: 2px;
            }
        img {
            padding: 1px;
            }
        img.aside {
            margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 25px;
            border-radius: 25px;
			box-shadow: -0 1px 0 #000000, -0 2px 0 #000000,
                0 3px 2px #000000, 0 4px 2px #000000,
                0 5px 2px #000000, 0 6px 2px #000000,
                0 7px 2px #000000, 0 8px 2px #000000,
                0 9px 2px #000000, 0 10px 2px #000000,
                0 11px 2px #000000, 0 12px 2px #000000,
                -0 20px 30px #7878F6;
}
         img.right:hover {
            transform: scale(1.05);
            }
        img.left:hover {
            transform: scale(1.05);
            }
        img.aside:hover {
            transform: scale(1.05);
            }

        img.right {
            margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 25px;
            border-radius: 25px;
			box-shadow: 10px 10px 5px #000000, 10px 10px 5px #000000,
                0 3px 2px #000000, 0 4px 2px #000000,
                0 5px 2px #000000, 0 6px 2px #000000,
                0 7px 2px #000000, 0 8px 2px #000000,
                0 9px 2px #000000, 0 10px 2px #000000,
                0 11px 2px #000000, 0 12px 2px #000000,
                10px 20px 30px #7878F6;
}
        img.left {
            margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 25px;
            border-radius: 25px;
			box-shadow: -10px 10px 5px #000000, -10px 10px 5px #000000,
                0 3px 2px #000000, 0 4px 2px #000000,
                0 5px 2px #000000, 0 6px 2px #000000,
                0 7px 2px #000000, 0 8px 2px #000000,
                0 9px 2px #000000, 0 10px 2px #000000,
                0 11px 2px #000000, 0 12px 2px #000000,
                -10px 20px 30px #7878F6;
}
video.aside {
            margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 25px;
            padding: 1px;
            border-radius: 25px;
			box-shadow: -0 1px 0 #000000, -0 2px 0 #000000,
                0 3px 2px #000000, 0 4px 2px #000000,
                0 5px 2px #000000, 0 6px 2px #000000,
                0 7px 2px #000000, 0 8px 2px #000000,
                0 9px 2px #000000, 0 10px 2px #000000,
                0 11px 2px #000000, 0 12px 2px #000000,
                -0 20px 30px #7878F6;
}
        video.right {
            margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 25px;
            padding: 1px;
            border-radius: 25px;
			box-shadow: 10px 10px 5px #000000, 10px 10px 5px #000000,
                0 3px 2px #000000, 0 4px 2px #000000,
                0 5px 2px #000000, 0 6px 2px #000000,
                0 7px 2px #000000, 0 8px 2px #000000,
                0 9px 2px #000000, 0 10px 2px #000000,
                0 11px 2px #000000, 0 12px 2px #000000,
                10px 20px 30px #7878F6;
}
        video.left {
            margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 25px;
            padding: 1px;
            border-radius: 25px;
			box-shadow: -10px 10px 5px #000000, -10px 10px 5px #000000,
                0 3px 2px #000000, 0 4px 2px #000000,
                0 5px 2px #000000, 0 6px 2px #000000,
                0 7px 2px #000000, 0 8px 2px #000000,
                0 9px 2px #000000, 0 10px 2px #000000,
                0 11px 2px #000000, 0 12px 2px #000000,
                -10px 20px 30px #7878F6;
}
:root {
  --color-jelles: #5906F2;
}
@keyframes glow {
  25% {
    border-top: 2px solid var(--color-jelles);
    border-right: 2px solid blue;
    border-bottom: 2px solid #7878F6;
    border-left: 2px solid blue;
  }
    50% {
    border-top: 2px solid #7878F6;
    border-right: 2px solid var(--color-jelles);
    border-bottom: 2px solid blue;
    border-left: 2px solid #7878F6;
  }
  75% {
    border-top: 2px solid blue;
    border-right: 2px solid #7878F6;
    border-bottom: 2px solid var(--color-jelles);
    border-left: 2px solid blue;
  }
  100% {
    border-top: 2px solid #7878F6;
    border-right: 2px solid blue;
    border-bottom: 2px solid #7878F6;
    border-left: 2px solid var(--color-jelles);
  }
}
		#textContainer .outline {
			color: #de0000;
			font-size: 80px;
			-webkit-text-fill-color: #de0000;
			-webkit-text-stroke-width: 1px;
			-webkit-text-stroke-color: #000000;
            text-shadow: 0 1px 0 #de0000, 0 2px 0 #de0000,
                0 3px 0 #000000, 0 4px 0 #000000,
                0 5px 0 #000000, 0 6px 0 #000000,
                0 7px 0 #000000, 0 8px 0 #000000,
                0 9px 0 #000000, 0 10px 0 #000000,
                0 11px 0 #000000, 0 12px 0 #000000,
                0 20px 30px #de0000;
        }

		i {
			color: #01F90E;}
		b {
			color: #FB9C00;}
		a {
			color: #FFFF00;
			text-decoration: none;}
		a.current {
			color: #E800FF;}
		p {
            text-indent: 20px;
			width: auto;}
        h1, h2, h3 {
			font-weight: normal;}
		h2 {
			margin: 10px 0px 5px 0px;
			color: #de0000;
			padding: 0px;}
		h3 {
			margin: 0px 0px 10px 0px;
			color: #FFFFFF;}
		h3 a {
			color: #01F90E;}
		h4 {
			color: #de0000;
			font-size: 75%;
			text-align: center;}
		h5 {
			color: #F500FC;
			font-size: 50%;}
		aside h2 {
			padding: 30px 0px 10px 0px;
			color: #de0000;}
        .column {
            float: left;
            width: 50%;
            padding: 10px;
}
        .leftc {
            width: 50%;
}

        .rightc {
            width: 50%;
}
    
        .row:after {
            content: "";
            display: table;
            clear: both;
}
        table {
			height: auto;
            width: 366px;
            empty-cells: hide;
}
		table.thegrid {
			height: auto;
            width: 366px;
            empty-cells: hide;
}
        td.fit {
            width: 0;
            min-width: fit-content;
}
        td {
			font-size: 70%;
			line-height: 1.8em;
			width: 122px;
			border-bottom: 1px solid #5D5D5D;}
		td.blank {
			visibility: hidden;}
		th {
			width: 122px;
            border-radius: 0.25rem;}
		.red-flourish {
            border-top: dotted 1px #f00;
			border-bottom: solid 1px #f00;
			height: 6px;}


.colorhighlight {
			color: #E800FF;}
sup {
			font-size: 50%;}
footer {
			width: 1000px;
            clear: both;
			color: #FFFFFF;
			text-align: center;
			font-size: 20px;
            margin: 20px auto 20px auto;
            height: auto;
			border: 2px;
            border-radius: 25px;
			box-shadow: 10px -10px 5px #000000, 10px -10px 5px #000000,
                0 -3px 2px #000000, 0 -4px 2px #000000,
                0 -5px 2px #000000, 0 -6px 2px #000000,
                0 -7px 2px #000000, 0 -8px 2px #000000,
                0 -9px 2px #000000, 0 -10px 2px #000000,
                0 -11px 2px #000000, 0 -12px 2px #000000,
                10px -20px 30px #7878F6;
            border-width: 2px;
            }

.footer {
	clear: both;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    text-align: center;
    background: rgba(0, 0, 0.2);}
.footer p {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 100%;
	text-align: center;}
.footer a{
	color: #FFFF00;}